<template>
    <van-pull-refresh v-model="loading" success-text="刷新成功" @refresh="onRefresh">
        <div style="width:360px;margin-left:12.5px;margin-right: 2.5px;margin-top: 8px;">
            <h1 style="margin-bottom: 10px;font-size:18px;animation:bounceInUp;animation-duration:2s;">杭州</h1>
            <div v-for="(item,index) in photoList1" :key="index" 
             style="float:left;margin:0 10px 20px 0;animation:bounceInUp;animation-duration:2s;">
                <va-card style="width:170px;display: flex;" @click="goDetail(item.id)">
                    <va-image :src="item.img" style="width:170px;height:170px;"/>
                    <va-card-title style="height:30px;font-size:12px;">{{item.title}}</va-card-title>
                </va-card>
            </div>

            <h1 style="margin-bottom: 10px;margin-top: 12px;font-size:large;animation:bounceInUp;animation-duration:2s;">Recommand</h1>
            <div v-for="(item,index) in photoList2" :key="index" 
            style="float:left;margin:0 10px 12px 0;animation:bounceInUp;animation-duration:2s;">
                <va-card style="width:110px;" @click="goDetail(item.id)">
                    <va-image :src="item.img" style="width:110px;height:170px;"/>
                    <va-card-title style="height:40px;font-size:12px;width:110px;overflow: hidden;text-overflow: ellipsis;">{{item.title}}</va-card-title>
                </va-card> 
            </div>
        </div>
    </van-pull-refresh>
</template>

<script>
import {reactive,toRefs,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
export default{
    setup(){
        const state=reactive({
            loading:false,
            photoList1:[],
            photoList2:[],
            photoList11:[],
            photoList21:[],
            photoList12:[],
            photoList22:[]
        })
        onMounted(async()=>{
            let res=await axios.get('photoInfo/hz.json').then(res=>res.data.items);
            for(let i=0;i<10;i++){
                let item={id:0,img:'',title:'',desc:''};
                item.id=res[i].note.id;
                item.img=res[i].note.original;
                item.title=res[i].note.title;
                item.desc=res[i].note.desc;
                if(i==0||i==1) state.photoList11.push(item);
                else if(i==2||i==3||i==4) state.photoList21.push(item);
                else if(i==5||i==6) state.photoList12.push(item);
                else state.photoList22.push(item);
            }
            state.photoList1=[];
            state.photoList2=[];
            state.photoList1=state.photoList11;
            state.photoList2=state.photoList21;
        })
        const havaData=()=>{
            state.photoList1=[];
            state.photoList2=[];
            state.photoList1=state.photoList12;
            state.photoList2=state.photoList22;
            state.loading= false;
        }
        const onRefresh = () => {
            setTimeout(havaData, 1000);
        }
        const router=useRouter();
        const goDetail=(index)=>{
            router.push({
                path:'/detail',
                query:{
                    id:index
                }
            })
        }
        return {
            ...toRefs(state),
            onRefresh,goDetail
        };
    }
}
</script>